<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <meta charset="utf-8">
    <title>身份认证</title>
    <link href="<%=path %>/web/userinfo/css/my_info.css" rel="stylesheet">
</head>
<body>
<div class="my_info_title">身份认证</div>
<div class="my_info_title_3">
    <ul>
        <li id="listClick_1" onClick="listClick(1)">基本资料</li>
        <li id="listClick_3" onClick="listClick(3)" style="border-bottom: 1px solid #C40521; color: #C40521;">身份认证</li>
        <li id="listClick_4" onClick="listClick(4)">修改密码</li>
    </ul>
</div>
<div class="my_info_content">
    <c:if test="${(sessionScope.userinfo.idCardPic eq NULL)&&(sessionScope.userinfo.idCardVerso eq NULL)}" var="result">
    <div class="my_info_content_care">您还未申请身份认证！<br>
     </div>
    <form action="<%=path %>/web/userinfo/identity_prove" method="post" enctype="multipart/form-data" id="id-card-form">
    <table class="my_info_content_care_table">
        <tbody>
        <input name="id" type="hidden" value="${sessionScope.userinfo.id}" />
        <tr>
            <td width="300" align="right" class="color555">上传身份证正面照：</td>
            <td class="color555">
                <input id="id-card-pic1" class="my_info_content_care_table_file" name="idCardPic" type="file" />
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">&nbsp;</td>
            <td class="color555">
                <img id="idCardPic" width="215" height="110" src="<%=path %>/web/userinfo/img/uploadImages/default_idcard.jpg"></img>
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">上传身份证背面照：</td>
            <td class="color555">
                <input id="id-card-pic2" class="my_info_content_care_table_file" name="idCardVerso" type="file" />
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">&nbsp;</td>
            <td class="color555">
                <img id="idCardVerso" width="215" height="110" src="<%=path %>/web/userinfo/img/uploadImages/default_idcard.jpg"></img>
            </td>
        </tr>
        <tr>
            <td align="right" class="color555">&nbsp;</td>
            <td class="color555"><span class="color959595 margin_left10 font_size12">温馨提示：请上传JPG/GIF/PNG格式图片，文件大小请控制在1M以内！</span></td>
        </tr>
        <tr>
            <td align="center" class="color555" colspan="2"><input class="my_info_content_care_table_submit" name="" type="submit" value="申请认证"></td>
        </tr>
        </tbody>
    </table>
    </form>
    </c:if>
    <c:if test="${not result}">
        <div class="my_info_content_care">您已进行身份认证，请勿重复操作！<br>
        </div>
    </c:if>
</div>

<script src="<%=path %>/web/static/js/modules/jquery-3.3.1.min.js"></script>
<script src="<%=path %>/web/userinfo/js/crowdfunding.js"></script>
</body>
</html>
<script>
    $(function(){

        var input1 = document.getElementById("id-card-pic1");
        input1.onchange = function() {
            var rd = new FileReader();//创建文件读取对象
            var files = input1.files[0];//获取file组件中的文件
            rd.readAsDataURL(files);//文件读取装换为base64类型
            rd.onloadend = function (e) {
                //加载完毕之后获取结果赋值给img
                document.getElementById("idCardPic").src = this.result;
            }
        }


        var input2 = document.getElementById("id-card-pic2");
        input2.onchange = function() {
            var rd = new FileReader();//创建文件读取对象
            var files = input2.files[0];//获取file组件中的文件
            rd.readAsDataURL(files);//文件读取装换为base64类型
            rd.onloadend = function (e) {
                //加载完毕之后获取结果赋值给img
                document.getElementById("idCardVerso").src = this.result;
            }
        }


        var check_error1 = false;
        var check_error2 = false;

        $("#id-card-form").submit(function(){
            check1();
            check2();
            if(check_error1&&check_error2){
                $(window.parent.document).find("#listClick3").attr("class","");
                return true;
            }else{
                return false;
            }
        })


        function check1(){
            var name =  $("#id-card-pic1").val();
            if(name==""){
                check_error1 =  false;
            }else{
                check_error1 = true;
            }
        }

        function check2(){
            var name =  $("#id-card-pic2").val();
            if(name==""){
                check_error2 =  false;
            }else{
                check_error2 = true;
            }
        }

    })


</script>
